<template>
    <Modal v-model="show" title="公式资源库" id="orh-formula" class="hide_footer" :styles="style">
        <div class="formula_body" v-loading="loading">
            <div class="formula_body_left">
                <div style="display:flex">
                    <RadioGroup v-model="subject" @on-change="load" type="button">
                        <Radio label="math">数学</Radio>
                        <Radio label="chemistry">化学</Radio>
                        <Radio label="physics">物理</Radio>
                    </RadioGroup> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <Button icon="refresh" @click="load"></Button>
                </div>
                <div style="margin: 13px 0; min-height:230px">
                    <div class="kt-item" v-for="(item,ind) in ktdata" :key="ind" v-katex="{expr:item.latex}" @click="selcet(item.latex)"></div>
                </div>
                <Page class="pagination" size="small"
                    @on-change="goToPage"
                    :current="pageData.page"
                    :total="pageData.total"
                    :page-size="pageData.limit">
                </Page>
            </div>
            <div class="formula_body_right">
                <Input type="textarea" placeholder="请输入公式编码" v-model="expers"></Input>
                <div style="margin:18px 0 22px 0">
                    预览：&nbsp;<span v-katex="{expr:expers}" class="example" ref="example"></span>
                </div>
                <div>
                    <Button @click="insert" type="primary" :loading="btloading" :disabled="disabled">生成公式</Button>
                    <Button @click="show=false">取消</Button>
                </div>
            </div>
        </div>
    </Modal>
</template>

<script>

// import domtoimage from 'dom-to-image'
import html2canvas from 'html2canvas'

export default {
    data() {
        return {
            subject: 'math',
            loading: false,
            btloading: false,
            disabled: false,
            ktdata: [],
            pageData: {
                total: 10,
                page: 1,
                limit: 10
            },
            url: 'http://api.ordosmz2.orhontech.com/',
            style: {
                width: '1000px',
            }
        }
    },
    props: {
        value: {
            type: Boolean,
            default: false
        },
        exper: {
            type: String,
            default: ''
        }
    },
    methods: {
        load(page=1) {
            this.loading = true
            this.$request.get('formula/'+this.subject+'?page='+page).then(res=> {
                console.log(res.data)
                this.pageData = res.page
                this.ktdata = res.data
                this.loading = false
            }).catch(err=> {
                this.loading = false
            })
        },
        selcet(expr) {
            this.expers = expr
        },
        insert() {
            // this.btloading = true
            let self = this
            let doms = this.$refs.example.getElementsByClassName('base')[0]
            // domtoimage.toPng(doms).then(function(dataUrl) {
            //     console.log(dataUrl)
            //     self.$emit('on-insert',dataUrl,self.expers);
            //     self.show = false
            //     self.btloading = false
            // }).catch(err=> {
            //     console.log(err)
            // })
            html2canvas(doms).then(function(canvas){
                let dataUrl = canvas.toDataURL()
                self.$emit('on-insert',dataUrl,self.expers);
                self.show = false
                self.btloading = false
            })
        },
        goToPage(n) {
            this.load(n)
        }
    },
    computed: {
        show: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input',val)
            }
        },
        expers: {
            get() {
                return this.exper
            },
            set(val) {
                this.$emit('exper-change',val)
            }
        }
    },
    created() {
        this.load()
    }
}
</script>

<style lang="less">
#orh-formula {
    .formula_body {
        display: flex;
        align-items: stretch;
        .formula_body_left {
            width: 62%;
            padding-right: 10px;
            box-sizing: border-box;
        }
        .formula_body_right {
            flex: 1;
            padding-left: 25px;
            border-left: 1px solid #f5f5f5;
            textarea {
                font-size: 17px;
            }
        }
        span.x-pagination-standard-btn-group {
            padding: 0 !important;
        }
        textarea {
            min-height: 150px;
        }
    }
    .kt-item {
        display: inline-block;
        padding: 10px;
        border: 1px solid #eee;
        font-size: 12px;
        cursor: pointer;
        margin: 0 10px 8px 0;
    }
    .formula_footer {
        input {
            width: 100%;
            padding: 3px 5px;
            border: 1px solid #ddd;
            border-radius: 2px;
            outline: none;
            font-size: 17px;
            &:focus {
                border-color: #2b85e4;
            }
        }
        .handal {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 12px;
            .example {
                font-size: 15px;
            }
            .primary {
                padding: 5px 12px;
                background: #2b85e4;
                border-radius: 2px;
                color: #fff;
                cursor: pointer;
            }
        }
    }
    .ivu-modal-wrap, .ivu-modal-mask {
        z-index: 70000;
    }
}
</style>
